<!doctype html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>Profile | Silentdoer Home</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="icon" href="../favicon.ico" type="image/x-icon"/>

	<link rel="stylesheet" href="../css/fonts.css">
	<link rel="stylesheet" href="../plugins/bootstrap-4.3.1-dist/css/bootstrap.min.css">
	<link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
	<link rel="stylesheet" href="../plugins/ionicons/dist/css/ionicons.min.css">
	<link rel="stylesheet" href="../plugins/icon-kit/dist/css/iconkit.min.css">
	<link rel="stylesheet" href="../plugins/perfect-scrollbar/css/perfect-scrollbar.css">
	<link rel="stylesheet" href="../css/theme.css">
	<script src="../js/modernizr-2.8.3.min.js"></script>
</head>

<body id="page-top">
<!--[if lt IE 8]>
<p class="browserupgrade">请换成<strong>Firefox或Chrome等主流浏览器</strong>访问。。</p>
<![endif]-->

<div class="wrapper">
	<script src="../header.js"></script>

	<div class="page-wrap">
		<!-- 左侧导航栏 -->
		<script src="../sidebar.js"></script>

		<div class="main-content">
			<!-- 可以在<div class="container-fluid">里面替换为自己的内容数据 -->
			<div class="container-fluid">

				<!-- 这个是除了index.html页面都有的一个面包屑导航 -->
				<div class="page-header">
					<div class="row align-items-end">
						<div class="col-lg-8">
							<div class="page-header-title">
								<i class="ik ik-file-text bg-blue"></i>
								<div class="d-inline">
									<h5>Profile</h5>
									<span>lorem ipsum dolor sit amet, consectetur adipisicing elit</span>
								</div>
							</div>
						</div>
						<div class="col-lg-4">
							<nav class="breadcrumb-container" aria-label="breadcrumb">
								<ol class="breadcrumb">
									<li class="breadcrumb-item">
										<a href="../index.html"><i class="ik ik-home"></i></a>
									</li>
									<li class="breadcrumb-item">
										<a href="#">Pages</a>
									</li>
									<li class="breadcrumb-item active" aria-current="page">Profile</li>
								</ol>
							</nav>
						</div>
					</div>
				</div>

				<!-- 页面具体内容 -->
				<div class="row">
					<div class="col-lg-4 col-md-5">
						<div class="card">
							<div class="card-body">
								<div class="text-center">
									<img src="../img/user.jpg" class="rounded-circle" width="150"/>
									<h4 class="card-title mt-10">John Doe</h4>
									<p class="card-subtitle">Front End Developer</p>
									<div class="row text-center justify-content-md-center">
										<div class="col-4"><a href="javascript:void(0)" class="link"><i
												class="ik ik-user"></i> <font class="font-medium">254</font></a></div>
										<div class="col-4"><a href="javascript:void(0)" class="link"><i
												class="ik ik-image"></i> <font class="font-medium">54</font></a></div>
									</div>
								</div>
							</div>
							<hr class="mb-0">
							<div class="card-body">
								<small class="text-muted d-block">Email address</small>
								<h6>johndoe@admin.com</h6>
								<small class="text-muted d-block pt-10">Phone</small>
								<h6>(123) 456 7890</h6>
								<small class="text-muted d-block pt-10">Address</small>
								<h6>71 Pilgrim Avenue Chevy Chase, MD 20815</h6>
								<div class="map-box">
									<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d248849.886539092!2d77.49085452149588!3d12.953959988118836!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bae1670c9b44e6d%3A0xf8dfc3e8517e4fe0!2sBengaluru%2C+Karnataka!5e0!3m2!1sen!2sin!4v1542005497600"
											width="100%" height="300" frameborder="0" style="border:0"
											allowfullscreen></iframe>
								</div>
								<small class="text-muted d-block pt-30">Social Profile</small>
								<br/>
								<button class="btn btn-icon btn-facebook"><i class="fab fa-facebook-f"></i></button>
								<button class="btn btn-icon btn-twitter"><i class="fab fa-twitter"></i></button>
								<button class="btn btn-icon btn-instagram"><i class="fab fa-instagram"></i></button>
							</div>
						</div>
					</div>
					<div class="col-lg-8 col-md-7">
						<div class="card">
							<ul class="nav nav-pills custom-pills" id="pills-tab" role="tablist">
								<li class="nav-item">
									<a class="nav-link active" id="pills-timeline-tab" data-toggle="pill"
									   href="#current-month" role="tab" aria-controls="pills-timeline"
									   aria-selected="true">Timeline</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#last-month"
									   role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
								</li>
								<li class="nav-item">
									<a class="nav-link" id="pills-setting-tab" data-toggle="pill" href="#previous-month"
									   role="tab" aria-controls="pills-setting" aria-selected="false">Setting</a>
								</li>
							</ul>
							<div class="tab-content" id="pills-tabContent">
								<div class="tab-pane fade show active" id="current-month" role="tabpanel"
									 aria-labelledby="pills-timeline-tab">
									<div class="card-body">
										<div class="profiletimeline mt-0">
											<div class="sl-item">
												<div class="sl-left"><img src="../img/users/1.jpg" alt="user"
																		  class="rounded-circle"/></div>
												<div class="sl-right">
													<div><a href="javascript:void(0)" class="link">John Doe</a> <span
															class="sl-date">5 minutes ago</span>
														<p>assign a new task <a href="javascript:void(0)"> Design
															weblayout</a></p>
														<div class="row">
															<div class="col-lg-3 col-md-6 mb-20"><img
																	src="../img/big/img2.jpg"
																	class="img-fluid rounded"/></div>
															<div class="col-lg-3 col-md-6 mb-20"><img
																	src="../img/big/img3.jpg"
																	class="img-fluid rounded"/></div>
															<div class="col-lg-3 col-md-6 mb-20"><img
																	src="../img/big/img4.jpg"
																	class="img-fluid rounded"/></div>
															<div class="col-lg-3 col-md-6 mb-20"><img
																	src="../img/big/img5.jpg"
																	class="img-fluid rounded"/></div>
														</div>
														<div class="like-comm">
															<a href="javascript:void(0)" class="link mr-10">2
																comment</a>
															<a href="javascript:void(0)" class="link mr-10"><i
																	class="fa fa-heart text-danger"></i> 5 Love</a>
														</div>
													</div>
												</div>
											</div>
											<hr>
											<div class="sl-item">
												<div class="sl-left"><img src="../img/users/2.jpg" alt="user"
																		  class="rounded-circle"/></div>
												<div class="sl-right">
													<div><a href="javascript:void(0)" class="link">John Doe</a> <span
															class="sl-date">5 minutes ago</span>
														<div class="mt-20 row">
															<div class="col-md-3 col-xs-12"><img
																	src="../img/big/img6.jpg" alt="user"
																	class="img-fluid rounded"/></div>
															<div class="col-md-9 col-xs-12">
																<p> Lorem ipsum dolor sit amet, consectetur adipiscing
																	elit. Integer nec odio. Praesent libero. Sed cursus
																	ante dapibus diam. </p> <a href="javascript:void(0)"
																							   class="btn btn-success">
																Design weblayout</a>
															</div>
														</div>
														<div class="like-comm mt-20">
															<a href="javascript:void(0)" class="link mr-10">2
																comment</a>
															<a href="javascript:void(0)" class="link mr-10"><i
																	class="fa fa-heart text-danger"></i> 5 Love</a>
														</div>
													</div>
												</div>
											</div>
											<hr>
											<div class="sl-item">
												<div class="sl-left"><img src="../img/users/3.jpg" alt="user"
																		  class="rounded-circle"/></div>
												<div class="sl-right">
													<div>
														<a href="javascript:void(0)" class="link">John Doe</a> <span
															class="sl-date">5 minutes ago</span>
														<p class="mt-10"> Lorem ipsum dolor sit amet, consectetur
															adipiscing elit. Integer nec odio. Praesent libero. Sed
															cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh
															elementum imperdiet. Duis sagittis ipsum. Praesent mauris.
															Fusce nec tellus sed augue semper </p>
													</div>
													<div class="like-comm mt-20">
														<a href="javascript:void(0)" class="link mr-10">2 comment</a>
														<a href="javascript:void(0)" class="link mr-10"><i
																class="fa fa-heart text-danger"></i> 5 Love</a>
													</div>
												</div>
											</div>
											<hr>
											<div class="sl-item">
												<div class="sl-left"><img src="../img/users/4.jpg" alt="user"
																		  class="rounded-circle"/></div>
												<div class="sl-right">
													<div><a href="javascript:void(0)" class="link">John Doe</a> <span
															class="sl-date">5 minutes ago</span>
														<blockquote class="mt-10">
															Lorem ipsum dolor sit amet, consectetur adipisicing elit,
															sed do eiusmod tempor incididunt
														</blockquote>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="tab-pane fade" id="last-month" role="tabpanel"
									 aria-labelledby="pills-profile-tab">
									<div class="card-body">
										<div class="row">
											<div class="col-md-3 col-6"><strong>Full Name</strong>
												<br>
												<p class="text-muted">Johnathan Deo</p>
											</div>
											<div class="col-md-3 col-6"><strong>Mobile</strong>
												<br>
												<p class="text-muted">(123) 456 7890</p>
											</div>
											<div class="col-md-3 col-6"><strong>Email</strong>
												<br>
												<p class="text-muted">johnathan@admin.com</p>
											</div>
											<div class="col-md-3 col-6"><strong>Location</strong>
												<br>
												<p class="text-muted">London</p>
											</div>
										</div>
										<hr>
										<p class="mt-30">Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
											arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam
											dictum felis eu pede mollis pretium. Integer tincidunt.Cras dapibus. Vivamus
											elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
											porttitor eu, consequat vitae, eleifend ac, enim.</p>
										<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
											Lorem Ipsum has been the industry's standard dummy text ever since the
											1500s, when an unknown printer took a galley of type and scrambled it to
											make a type specimen book. It has survived not only five centuries </p>
										<p>It was popularised in the 1960s with the release of Letraset sheets
											containing Lorem Ipsum passages, and more recently with desktop publishing
											software like Aldus PageMaker including versions of Lorem Ipsum.</p>
										<h4 class="mt-30">Skill Set</h4>
										<hr>
										<h6 class="mt-30">Wordpress <span class="pull-right">80%</span></h6>
										<div class="progress progress-sm">
											<div class="progress-bar bg-success" role="progressbar" aria-valuenow="80"
												 aria-valuemin="0" aria-valuemax="100" style="width:80%;"><span
													class="sr-only">50% Complete</span></div>
										</div>
										<h6 class="mt-30">HTML 5 <span class="pull-right">90%</span></h6>
										<div class="progress  progress-sm">
											<div class="progress-bar bg-info" role="progressbar" aria-valuenow="90"
												 aria-valuemin="0" aria-valuemax="100" style="width:90%;"><span
													class="sr-only">50% Complete</span></div>
										</div>
										<h6 class="mt-30">jQuery <span class="pull-right">50%</span></h6>
										<div class="progress  progress-sm">
											<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="50"
												 aria-valuemin="0" aria-valuemax="100" style="width:50%;"><span
													class="sr-only">50% Complete</span></div>
										</div>
										<h6 class="mt-30">Photoshop <span class="pull-right">70%</span></h6>
										<div class="progress  progress-sm">
											<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="70"
												 aria-valuemin="0" aria-valuemax="100" style="width:70%;"><span
													class="sr-only">50% Complete</span></div>
										</div>
									</div>
								</div>
								<div class="tab-pane fade" id="previous-month" role="tabpanel"
									 aria-labelledby="pills-setting-tab">
									<div class="card-body">
										<form class="form-horizontal">
											<div class="form-group">
												<label for="example-name">Full Name</label>
												<input type="text" placeholder="Johnathan Doe" class="form-control"
													   name="example-name" id="example-name">
											</div>
											<div class="form-group">
												<label for="example-email">Email</label>
												<input type="email" placeholder="johnathan@admin.com"
													   class="form-control" name="example-email" id="example-email">
											</div>
											<div class="form-group">
												<label for="example-password">Password</label>
												<input type="password" value="password" class="form-control"
													   name="example-password" id="example-password">
											</div>
											<div class="form-group">
												<label for="example-phone">Phone No</label>
												<input type="text" placeholder="123 456 7890" id="example-phone"
													   name="example-phone" class="form-control">
											</div>
											<div class="form-group">
												<label for="example-message">Message</label>
												<textarea name="example-message" name="example-message" rows="5"
														  class="form-control"></textarea>
											</div>
											<div class="form-group">
												<label for="example-country">Select Country</label>
												<select name="example-message" id="example-message"
														class="form-control">
													<option>London</option>
													<option>India</option>
													<option>Usa</option>
													<option>Canada</option>
													<option>Thailand</option>
												</select>
											</div>
											<button class="btn btn-success" type="submit">Update Profile</button>
										</form>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="../footer.js"></script>

		<!-- 这两个聊天框定义的位置不能乱放，放其他地方可能会没法弹出框 -->
		<!-- 点击消息item后右侧弹出的聊天框 -->
		<aside class="right-sidebar">
			<div class="sidebar-chat" data-plugin="chat-sidebar">
				<div class="sidebar-chat-info">
					<h6>Chat List</h6>
					<form class="mr-t-10">
						<div class="form-group">
							<input type="text" class="form-control" placeholder="Search for friends ...">
							<i class="ik ik-search"></i>
						</div>
					</form>
				</div>
				<div class="chat-list">
					<div class="list-group row">
						<a href="javascript:void(0)" class="list-group-item" data-chat-user="Gene Newman">
							<figure class="user--online">
								<img src="../img/users/1.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Gene Newman</span>  <span
									class="username">@gene_newman</span> </span>
						</a>
						<a href="javascript:void(0)" class="list-group-item" data-chat-user="Billy Black">
							<figure class="user--online">
								<img src="../img/users/2.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Billy Black</span>  <span
									class="username">@billyblack</span> </span>
						</a>
						<a href="javascript:void(0)" class="list-group-item" data-chat-user="Herbert Diaz">
							<figure class="user--online">
								<img src="../img/users/3.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Herbert Diaz</span>  <span class="username">@herbert</span> </span>
						</a>
						<a href="javascript:void(0)" class="list-group-item" data-chat-user="Sylvia Harvey">
							<figure class="user--online">
								<img src="../img/users/4.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Sylvia Harvey</span>  <span class="username">@sylvia</span> </span>
						</a>
						<a href="javascript:void(0)" class="list-group-item active" data-chat-user="Marsha Hoffman">
							<figure class="user--busy">
								<img src="../img/users/5.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Marsha Hoffman</span>  <span
									class="username">@m_hoffman</span> </span>
						</a>
						<a href="javascript:void(0)" class="list-group-item" data-chat-user="Mason Grant">
							<figure class="user--offline">
								<img src="../img/users/1.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Mason Grant</span>  <span
									class="username">@masongrant</span> </span>
						</a>
						<a href="javascript:void(0)" class="list-group-item" data-chat-user="Shelly Sullivan">
							<figure class="user--offline">
								<img src="../img/users/2.jpg" class="rounded-circle" alt="">
							</figure>
							<span><span class="name">Shelly Sullivan</span>  <span
									class="username">@shelly</span></span>
						</a>
					</div>
				</div>
			</div>
		</aside>

		<!-- 点击好友头像后弹出的聊天框 -->
		<div class="chat-panel" hidden>
			<div class="card">
				<div class="card-header d-flex justify-content-between">
					<a href="javascript:void(0);"><i class="ik ik-message-square text-success"></i></a>
					<span class="user-name">John Doe</span>
					<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
				</div>
				<div class="card-body">
					<div class="widget-chat-activity flex-1">
						<div class="messages">
							<div class="message media reply">
								<figure class="user--online">
									<a href="#">
										<img src="../img/users/3.jpg" class="rounded-circle" alt="">
									</a>
								</figure>
								<div class="message-body media-body">
									<p>Epic Cheeseburgers come in all kind of styles.</p>
								</div>
							</div>
							<div class="message media">
								<figure class="user--online">
									<a href="#">
										<img src="../img/users/1.jpg" class="rounded-circle" alt="">
									</a>
								</figure>
								<div class="message-body media-body">
									<p>Cheeseburgers make your knees weak.</p>
								</div>
							</div>
							<div class="message media reply">
								<figure class="user--offline">
									<a href="#">
										<img src="../img/users/5.jpg" class="rounded-circle" alt="">
									</a>
								</figure>
								<div class="message-body media-body">
									<p>Cheeseburgers will never let you down.</p>
									<p>They'll also never run around or desert you.</p>
								</div>
							</div>
							<div class="message media">
								<figure class="user--online">
									<a href="#">
										<img src="../img/users/1.jpg" class="rounded-circle" alt="">
									</a>
								</figure>
								<div class="message-body media-body">
									<p>A great cheeseburger is a gastronomical event.</p>
								</div>
							</div>
							<div class="message media reply">
								<figure class="user--busy">
									<a href="#">
										<img src="../img/users/5.jpg" class="rounded-circle" alt="">
									</a>
								</figure>
								<div class="message-body media-body">
									<p>There's a cheesy incarnation waiting for you no matter what you palete
										preferences are.</p>
								</div>
							</div>
							<div class="message media">
								<figure class="user--online">
									<a href="#">
										<img src="../img/users/1.jpg" class="rounded-circle" alt="">
									</a>
								</figure>
								<div class="message-body media-body">
									<p>If you are a vegan, we are sorry for you loss.</p>
								</div>
							</div>
						</div>
					</div>
				</div>
				<form action="javascript:void(0)" class="card-footer" method="post">
					<div class="d-flex justify-content-end">
						<textarea class="border-0 flex-1" rows="1" placeholder="Type your message here"></textarea>
						<button class="btn btn-icon" type="submit"><i class="ik ik-arrow-right text-success"></i>
						</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>


<div class="modal fade apps-modal" id="appsModal" tabindex="-1" role="dialog" aria-labelledby="appsModalLabel"
	 aria-hidden="true" data-backdrop="false">
	<button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="ik ik-x-circle"></i></button>
	<div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="quick-search">
				<div class="container">
					<div class="row">
						<div class="col-md-4 ml-auto mr-auto">
							<div class="input-wrap">
								<input type="text" id="quick-search" class="form-control" placeholder="Search..."/>
								<i class="ik ik-search"></i>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-body d-flex align-items-center">
				<div class="container">
					<div class="apps-wrap">
						<div class="app-item">
							<a href="#"><i class="ik ik-bar-chart-2"></i><span>Dashboard</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-mail"></i><span>Message</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-users"></i><span>Accounts</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-shopping-cart"></i><span>Sales</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-briefcase"></i><span>Purchase</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-server"></i><span>Menus</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-clipboard"></i><span>Pages</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-message-square"></i><span>Chats</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-map-pin"></i><span>Contacts</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-box"></i><span>Blocks</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-calendar"></i><span>Events</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-bell"></i><span>Notifications</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-pie-chart"></i><span>Reports</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-layers"></i><span>Tasks</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-edit"></i><span>Blogs</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-settings"></i><span>Settings</span></a>
						</div>
						<div class="app-item">
							<a href="#"><i class="ik ik-more-horizontal"></i><span>More</span></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/jquery-3.4.1.js"><\/script>')</script>
<script src="../plugins/popper.js/dist/umd/popper.min.js"></script>
<script src="../plugins/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
<script src="../plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
<script src="../plugins/screenfull/dist/screenfull.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/theme.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<!--<script>
	(function (b, o, i, l, e, r) {
		b.GoogleAnalyticsObject = l;
		b[l] || (b[l] =
			function () {
				(b[l].q = b[l].q || []).push(arguments)
			});
		b[l].l = +new Date;
		e = o.createElement(i);
		r = o.getElementsByTagName(i)[0];
		e.src = 'https://www.google-analytics.com/analytics.js';
		r.parentNode.insertBefore(e, r)
	}(window, document, 'script', 'ga'));
	ga('create', 'UA-XXXXX-X', 'auto');
	ga('send', 'pageview');
</script>-->

<script>
	new Vue({
		el: '#app-header'
		, data() {
			let urlPrefix = 'http://localhost:8080';
			let userAvatar = urlPrefix + '/img/user.jpg';
			let usersAvatar1 = urlPrefix + '/img/users/1.jpg';
			return {
				urlPrefix,
				userAvatar,
				usersAvatar1
			};
		}
	});
</script>

<script>
	// FLAG vue for sidebar.html
	class UriUtils {
		static isRelativeUri(uri) {
			if (uri !== undefined && uri !== null && uri !== '') {
				if (uri.startsWith("/")) {
					return true;
				} else {
					return false;
				}
			}
			throw new Error('arg is not valid uri');
		}

		static isBlankUri(uri) {
			if (uri === undefined || uri === null || uri === '') {
				return true;
			}
			return false;
		}

		static getUrlRelativePath() {
			const url = document.location.toString();
			const arrUrl = url.split("//");

			let start = arrUrl[1].indexOf("/");
			//stop省略，截取从start开始到结尾的所有字符
			let relUrl = arrUrl[1].substring(start);

			if(relUrl.indexOf("?") !== -1){
				relUrl = relUrl.split("?")[0];
			}
			return relUrl;
		}
	}

	class SidebarHeader {
		// 构造方法，只要触发new实例化操作即执行，由于js里方法参数没有类型，且可以不传所有参数，因为没法重载
		constructor(linkUrl, logoUrl, brandName) {
			if (typeof linkUrl === 'string') {
				this.linkUrl = linkUrl;
				this.logoUrl = logoUrl;
				this.brandName = brandName;
			} else {
				this.constructorJSON(linkUrl);
			}
		}

		constructorJSON(json) {
			this.linkUrl = json.linkUrl;
			this.logoUrl = json.logoUrl;
			this.brandName = json.brandName;
		}

		// ES7也可以在构造方法外面定义实例属性，和定义实例方法的方式是一样的，即（最好加个默认值，不然怪怪的）
		//linkUrl;
		// ES7里定义静态方法和变量其实就是前面加个static关键字即可；
	}

	// 可以约定，以_开头的方法或属性都是私有的（当然外部仍然可以调用，只是给开发者自己看）
	class SidebarItem {
		// 构造方法，只要触发new实例化操作即执行
		constructor(linkUrl, itemName, iconType, badge, badgeType, active, hasSub, subItems) {
			if (typeof linkUrl === 'string') {
				this.linkUrl = linkUrl;
				this.itemName = itemName;
				this.iconType = iconType;
				this.badge = badge;
				this.badgeType = json.badgeType;
				this.active = active;
				this.hasSub = hasSub;
				this.subItems = subItems;
			} else {
				this.constructorJSON(linkUrl);
			}

			// 通用属性定义（已作废）
			this.additionalClass = '';

			// 还可以这样定义实例方法
			this.hasSubItems = () => {
				if (this.hasSub === true && this.subItems !== undefined && this.subItems.length > 0) {
					return true;
				}
				return false;
			}
		}

		constructorJSON(json) {
			this.linkUrl = json.linkUrl;
			this.itemName = json.itemName;
			this.iconType = json.iconType;
			this.badge = json.badge;
			this.badgeType = json.badgeType;
			this.active = json.active;
			this.hasSub = json.hasSub;
			this.subItems = json.subItems;
		}

		// 注意在class类中，方法之间不需要添加逗号
		isActive() {
			return this.active === true;
		}
	}

	new Vue({
		el: '#app-sidebar'
		, data() {
			let protocol = 'http';
			let urlPrefix = protocol + '://' + window.location.host;

			return {
				urlPrefix,
				/*也可以设置默认值*/
				sidebarHeader: null,
				sidebarItemsNavigation: null
			};
		}
		, methods: {
			async fetchSidebarHeader() {
				try {
					// fetch是浏览器自带的，默认是GET
					this.sidebarHeader = await fetch(`${this.urlPrefix}/demovuebootstrap/api/application/index/sidebarHeader`)
						.then(res => res.json())
						.then(data => {
							let result = new SidebarHeader(data);
							if (UriUtils.isRelativeUri(result.linkUrl)) {
								result.linkUrl = this.urlPrefix + result.linkUrl;
							}
							if (UriUtils.isRelativeUri(result.logoUrl)) {
								result.logoUrl = this.urlPrefix + result.logoUrl;
							}
							return result;
						});
				} catch (err) {
					console.log('Load SidebarHeader failed! ' + err);
				}
			}
			, async fetchSidebarItems() {
				try {
					// fetch是浏览器自带的，默认是GET
					this.sidebarItemsNavigation = await fetch(`${this.urlPrefix}/demovuebootstrap/api/application/index/sidebarItems`)
						.then(res => res.json())
						.then(data => {
							let result = [];
							data.forEach(i => {
								let item = new SidebarItem(i);
								if (UriUtils.isBlankUri(item.linkUrl)) {
									item.linkUrl = 'javascript:void(0)';
								} else {
									if (UriUtils.isRelativeUri(item.linkUrl)) {
										item.linkUrl = this.urlPrefix + item.linkUrl;
									}
								}
								/*if (item.linkUrl.search(UriUtils.getUrlRelativePath()) !== -1) {
									item.additionalClass += ' active';
								}
								if (item.hasSubItems()) {
									item.additionalClass += ' has-sub';
								}*/
								if (item.linkUrl.search(UriUtils.getUrlRelativePath()) !== -1) {
									item.active = true;
								}
								// 将服务端的icon type转换为class
								switch (item.iconType) {
									case 'chart':
										item.iconType = ' ik-bar-chart-2';
										break;
									case 'menu':
										item.iconType = ' ik-menu';
										break;
									case 'layers':
										item.iconType = ' ik-layers';
										break;
									default:
										item.iconType = null;
								}
								// 将服务端传来的badge type转换为class
								switch (item.badgeType) {
									case 'success':
										item.badgeType = ' badge-success';
										break;
									case 'danger':
										item.badgeType = ' badge-danger';
										break;
									default:
										item.badgeType = null;
								}
								if (item.hasSubItems()) {
									for (let i = 0; i < item.subItems.length; i++) {
										let subItem = new SidebarItem(item.subItems[i]);
										if (UriUtils.isRelativeUri(subItem.linkUrl)) {
											subItem.linkUrl = this.urlPrefix + subItem.linkUrl;
										}
										// 其实可以移到上面的if里面最后
										item.subItems[i] = subItem;
									}
								}
								result.push(item);
							});
							return result;
						});
				} catch (err) {
					console.log('Load SidebarItems failed! ' + err);
				}
			}
		}
		/*这里面的方法貌似仍然比对v-bind之类的渲染要慢，貌似vue没法在渲染之前获取数据，而是通过v-if来判断没有数据先不展示*/
		, created() {
			this.fetchSidebarHeader();
			this.fetchSidebarItems();
		}
	});
</script>
</body>
</html>
